
import React from 'react';
import { Link } from 'react-router-dom';
import SeoHead from '../components/SeoHead';
import { useLocalization } from '../hooks/useLocalization';

const NotFoundPage: React.FC = () => {
    const { t, getLocalizedPath } = useLocalization();

    return (
        <>
            <SeoHead
                title={t('not_found_title')}
                description="" // No real description needed for a 404
            />
            <div className="flex items-center justify-center py-20 text-center">
                <div className="container mx-auto px-4 sm:px-6 lg:px-8">
                    <h1 className="text-8xl font-extrabold text-primary dark:text-primary-light">
                        {t('not_found_h1')}
                    </h1>
                    <p className="mt-4 text-3xl font-bold tracking-tight text-dark dark:text-white sm:text-4xl">
                        {t('not_found_subtitle')}
                    </p>
                    <p className="mt-6 text-lg leading-7 text-gray-500 dark:text-gray-400">
                        {t('not_found_p1')}
                    </p>
                    <div className="mt-10 flex items-center justify-center gap-x-6">
                        <Link
                            to={getLocalizedPath('/')}
                            className="rounded-md bg-primary px-4 py-3 text-sm font-semibold text-white shadow-sm hover:bg-primary-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-dark"
                        >
                            {t('not_found_button')}
                        </Link>
                    </div>
                </div>
            </div>
        </>
    );
};

export default NotFoundPage;
